<template>
	<view class="container">
		<view class="header">近视三级预防</view>
		<view class="level-btns">
			<view 
				v-for="(item, index) in levels"
				:key="index"
				class="level-btn"
				:data-type="item.type"
				:class="{ active: index === currentLevel }"
				@click="switchLevel(index)"
			>
				{{ item.label }}
				<view class="level-desc">{{ item.desc }}</view>
			</view>
		</view>
		
		<view class="content">
			<view v-if="currentLevel === 0" class="content-card">
				<text class="title">&CenterDot;用眼行为监测与干预</text>
				<text class="tip">
					分年龄段使用《家长版》和《学生版》评价表，识别风险行为（如户外活动不足、电子产品滥用、不良读写姿势等），并通过适宜技术（如课桌椅测量尺、光照监测仪等）改善行为。
				</text>
				<text class="title">&CenterDot;视觉环境优化</text>
				<text class="tip">
					学校：按国家标准配备采光照明和可调节课桌椅，每月调换座位，选择大尺寸高分辨率屏幕。
				</text>
				<text class="tip">
					家庭：书桌自然光方向合理（照度≥300lx），使用CCC认证台灯，控制电子产品使用距离（电视≥4倍对角线、电脑≥50cm）。
				</text>
				<text class="tip">
					社区：增加绿地与活动设施，规范夜间光环境。
				</text>
				<text class="title">&CenterDot;户外活动与运动</text>
				<text class="tip">
					每日日间户外活动≥2小时（校内校外各1小时），每周累计≥14小时；体育锻炼≥1小时（含中高强度运动）。
				</text>
				<text class="title">&CenterDot;全员健康教育</text>
				<text class="tip">教师、学生、家长分别通过培训、主题班会、家庭实践提升防控意识，社会层面打击虚假营销，传播科学知识。</text>
			</view>
			
			<view v-if="currentLevel === 1" class="content-card">
				<text class="title">&CenterDot;​视力筛查与建档</text>
				<text class="tip">建立视力定期筛查制度，开展视力不良筛查，筛查频率每学年不少于 2 次，规范记录检查内容，建立视力健康信息化管理。注重筛查建档过程的规范性，加强质控，以实行筛查后分级闭环管理。借助人工智能技术提升视力筛查自动化程度，提高工作效率和普及性。</text>
				<text class="title">&CenterDot;​​近视预警管理</text>
				<text class="tip">
					及时分析儿童青少年视力健康状况，早期筛查近视及其他屈光不正，动态观察儿童青少年不同时期屈光状态发展变化，早期发现近视的倾向或趋势，建立近视预警模型，制订适用可行的干预措施，减缓近视快速和重度化发展。结合视力筛查和档案建立，对视力正常但存在近视高危因素或远视储备量不足的儿童青少年，建议其改变高危行为，学校、家庭、社区协同，通过多种途径增加日间户外活动，减少近距离用眼行为，改善视觉环境。对近视前期者，应当予以高危预警，重点干预，建议到专业机构接受医学验光等专业检查，明确诊断并及时采取相应措施，控制和减缓儿童青少年近视的发生发展。
				</text>
			</view>
			
			<view v-if="currentLevel === 2" class="content-card">
				<text class="title">&CenterDot;​​科学矫正近视</text>
				<text class="tip">
					对已经近视的儿童青少年，指导家长要及时带孩子到专业机构检查矫正，如专业检查后确定需要配戴眼镜，家长应遵照医生或视光师的要求给孩子选择合适度数的眼镜，遵照医嘱戴镜，并进行定期随访。
				</text>
				<text class="title">&CenterDot;防控近视的重度化和并发症。</text>
				<text class="tip">
					对近视发病年龄早或近视发展速度快的儿童青少年，专科医生要对症采用光学矫正、药物矫正或中医药方法减缓近视进展。家长应到正规医疗机构，在医生或视光师指导下选择适合孩子的措施，并遵医嘱使用。对于存在眼底病理改变和其他并发症的儿童青少年，家长要及时带孩子到专业医疗机构经专科医生诊治。
				</text>
			</view>
		</view>
		<button style="margin-top: 20rpx;" type="primary" @click="download()">下载<<儿童青少年近视防控公共卫生综合干预技术指南>></button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentLevel: 0,
				levels: [
					{
						label: '一级预防',
						desc: '源头防控',
						type: 'primary',
						color: 'var(--color-primary)'
					},
					{
						label: '二级预防',
						desc: '早筛早管',
						type: 'warning',
						color: 'var(--color-warning)'
					},
					{
						label: '三级预防',
						desc: '科学矫正',
						type: 'danger',
						color: 'var(--color-danger)'
					}
				]
			}
		},
		methods: {
			switchLevel(index) {
				this.currentLevel = index;
			},
			download(){
				console.log('download')
				uni.showLoading({
					mask:true,
					title:'下载中'
				})
				uni.downloadFile({
					url:this.baseUrl+'/api/download/guide',
					timeout:3000,
					success(res) {
					  if (res.statusCode === 200) {
					    uni.saveFile({
					      tempFilePath: res.tempFilePath, // 临时文件路径
					      success: (saveRes) => {
							  uni.hideLoading();
					        const savedFilePath = saveRes.savedFilePath; // 持久化路径
					        uni.showToast({ title: '文件已保存' });
					        // 可选：自动打开文件
					        uni.openDocument({ filePath: savedFilePath });
					      },
					      fail: (saveErr) => {
							  uni.hideLoading();
					        console.error('保存失败', saveErr);
					        uni.showToast({ icon: 'error', title: '文件保存失败' });
					      }
					    });
					  } else {
						  uni.hideLoading();
					    uni.showToast({ icon: 'none', title: '服务器响应异常' });
					  }
					},
					fail() {
						uni.hideLoading();
						console.log('download fail')
						uni.showToast({
							icon:'error',
							title:'下载失败',
						})
					}
				})
			}
		},
		mounted() {
			//console.log(this.baseUrl);
		}
	}
</script>

<style>
	:root {
		--color-primary: #00c853;
		--color-warning: #ff9100;
		--color-danger: #ff1744;
		--shadow-sm: 0 2rpx 8rpx rgba(0,0,0,0.1);
		--radius-md: 16rpx;
	}
	
	.container {
		padding: 30rpx;
		background: #f8f9fa;
		min-height: 100vh;
	}
	
	.header {
		font-size: 44rpx;
		font-weight: 600;
		color: #2d3436;
		text-align: center;
		padding: 20rpx 0;
		letter-spacing: 2rpx;
	}
	
	.level-btns {
		display: flex;
		gap: 20rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.level-btn {
		flex: 1;
		height: 120rpx;
		padding: 10rpx;
		border-radius: var(--radius-md);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: 500;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		box-shadow: var(--shadow-sm);
	}
	
	.level-btn::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 6rpx;
		background: rgba(255,255,255,0.9);
		transition: width 0.3s ease;
	}
	
	.level-btn.active::after {
		width: 80%;
	}
	
	.level-btn[data-type="primary"] {
		background: linear-gradient(135deg, var(--color-primary), #4caf50);
	}
	
	.level-btn[data-type="warning"] {
		background: linear-gradient(135deg, var(--color-warning), #ffab00);
	}
	
	.level-btn[data-type="danger"] {
		background: linear-gradient(135deg, var(--color-danger), #d50000);
	}
	
	.level-desc {
		font-size: 24rpx;
		margin-top: 10rpx;
		opacity: 0.9;
	}
	
	.content-card {
		background: #fff;
		border-radius: var(--radius-md);
		padding: 30rpx;
		box-shadow: var(--shadow-sm);
	}
	
	.title {
		display: block;
		font-size: 36rpx;
		font-weight: 500;
		color: #2d3436;
		margin-bottom: 20rpx;
	}
	
	.tip {
		display: block;
		font-size: 30rpx;
		color: #636e72;
		line-height: 1.8;
		margin: 10rpx 0;
		text-indent: 2em;
	}
</style>